<template>
	<div class="UseNav">
		<ul>
			<router-link
				tag="li"
				v-for="item in UseNavList"
				:to='item.href'
				active-class="active"
			>
				<span>{{item.name}}</span>
			</router-link> 

		</ul>
	</div>
</template>
<script>
	export default{
		name:'UseNav',
		data(){
			return{
				UseNavList:[
					{
						name:'自动售票',
						href:'/UsePage/onePage'
					},
					{
						name:'互联网取票',
						href:'/UsePage/twoPage'
					},
					{
						name:'微信吸粉',
						href:'/UsePage/threePage'
					},
					{
						name:'线下分销',
						href:'/UsePage/fourPage'
					},
					{
						name:'景区联盟',
						href:'/UsePage/fivePage'
					}
				]
			}
		}
	}
</script>
<style scoped>
	@media only screen and (min-width: 1000px){
		.UseNav{
			width: 100%;
			margin:70px 0; 
		}
		.UseNav ul{
			width: 1000px;
			text-align: center;
		    margin:0 auto;
		}
		.UseNav ul li{
			display: inline-block;
			cursor: pointer;
			height: 52px;
		}
		.UseNav ul li.active{
			background:url('../../assets/fiveuse/sanjiaoxing.png') no-repeat;
			 background-position: center bottom;
			 
		}
		.UseNav ul li.active span{
			color: #00ade6;
		}
		.UseNav ul li span{
			border-right:1px solid #dddddd;
			padding: 0 40px;
			font-size: 18px;
			color: #4d4845;
		}
		.UseNav ul li:last-child span{
			border-right:none;
		}

	}
	
	

</style>